import { 
  useState, 
  useEffect,
  ChangeEvent, 
  FormEvent,
  useRef
} from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import {
  StyleTextfield,
  StyleLabel,
  FormErrorMessage,
  ModalErrorMessage
  } from '../lib/formstyles'
import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
import { useVulnerabilityColor } from '../lib/customHooks';
import { WithAuth } from "../lib/authutils";
import { currentUserCan } from '../lib/utilities';
import CKWrapper from '../components/ckwrapper'

import {
  Tabs,
  TabsHeader,
  TabsBody,
  Tab,
  TabPanel,
  Button,
  TabsHeaderProps,
  TabProps,
  TabsBodyProps,
  TabPanelProps,
  ListProps,
  ButtonProps
} from "@material-tailwind/react";

// Create properly typed TabPanel component
const TabPanelComponent = TabPanel as unknown as React.FC<{ 
  className?: string; 
  value: string; 
  children: React.ReactNode; 
  placeholder?: string; 
  onPointerEnterCapture?: () => void; 
  onPointerLeaveCapture?: () => void;
  key?: string;
}>;
import ScoreRadioButton from '../components/score-radio-button'
import InstanceTable from '../components/instanceTable'
import { FormSkeleton, RowSkeleton } from '../components/skeletons'
import { Vulnerability, Project, ProjectVulnerability } from '../lib/data/definitions'
import * as api from '../lib/data/api';

import toast from 'react-hot-toast';
import {List} from "@material-tailwind/react";
import VulnerabilityNameInput from '../components/vulnerability-name-input'
interface FormErrors {
  vulnerabilityname?: string
  vulnerabilityseverity?: string
  vulnerabilitydescription?: string
  vulnerabilitysolution?: string
  vulnerabilityscore?: string
  instance?: string
  url?: string
  parameter?: string
  bulkUrls?: string
}
//function to break the vulnerabilitycvssvector into an object for form radio buttons
function parseStringToObject(input: string): Record<string, string | null> {
  const pairs = input.split('/').filter(Boolean); // Split string by '/' and remove empty segments
  const result: Record<string, string | null> = {};
  for (const pair of pairs) {
    const [key, value] = pair.split(':'); // Split key-value pairs by ':'
    result[key] = value !== undefined ? value : null;
  }
  return result;
}

//converts an object representation of vulnerabilitycvssvector and converts it to a string like  e.g. CVSS:3.1/AV:N/AC:H/PR:N/UI:N/S:U/C:N/I:N/A:N"
function updateStringWithKeyValuePair(input: string | null | undefined, key: string, value: string | null): string {
  if(!input) return ''
  let keyValuePairs: Record<string, string | null> = {};

  if (input) {
    keyValuePairs = parseStringToObject(input);
  }
  keyValuePairs[key] = value;

  const updatedString = Object.entries(keyValuePairs)
    .map(([k, v]) => v !== null ? `${k}:${v}` : k) // Return key if value is null
    .join('/');
  return updatedString;
}

type CVSSReturn = {
  success?: boolean
  errorType?: string
  baseMetricScore?: string | number | undefined;
  baseSeverity?: string | number | undefined;
  environmentalMetricScore?: string | number | undefined;
  environmentalSeverity?: string | number | undefined;
  temporalMetricScore?: string | number | undefined;
  temporalSeverity?: string | number | undefined;
  vectorString?: string | number | undefined;
}
interface VulnerabilityFormProps {
  action?: 'addToProject' | 'saveToProject'
}
function VulnerabilityForm(props: VulnerabilityFormProps): JSX.Element {
  //calculator is loaded in the base index.html from https://www.first.org/cvss/calculator/cvsscalc31.js
  const calculate: ((vector: string | null | undefined) => CVSSReturn) | undefined = window?.CVSS31.calculateCVSSFromVector;
  const navigate = useNavigate()
  if(!currentUserCan('Manage Vulnerability Data')){
    navigate('/access-denied')
  }
  // this is a flag used by <VulnerabilityNameInput /> to determine wheter to execute a search on the field value
  const params = useParams()
  const projectId = params.projectId
  const [selectedTab, setSelectedTab] = useState(params.tab ?? 'summary')
  // this flag is used to determine whether to execute a search on the vulnerability name input field
  const [isInitialLoad, setIsInitialLoad] = useState(true);
  const [project, setProject] = useState<Project>()
  const id = params.id
  const [btnDisabled, setBtnDisabled] = useState(false)
  const [loading, setLoading] = useState(false);
  const [loadingError, setLoadingError] = useState(false);
  const [saveError, setSaveError] = useState('');
  const [errors, setErrors] = useState<FormErrors>({});
  const [editing, setEditing] = useState(false)
  const topOfForm = useRef<HTMLDivElement | null>(null);

  let defaultValues:any = {
        vulnerabilityname: "",
        vulnerabilityseverity: "",
        vulnerabilitydescription: "",
        vulnerabilitysolution: "",
        vulnerabilityreferlnk: "",
        cvssvector: "CVSS:3.1/AV:/AC:/PR:/UI:/S:/C:/I:/A:",
        cvssscore: ''
  }
  if(projectId){
    defaultValues.project = projectId;
    defaultValues.POC = '';
    defaultValues.instance= [];
  }
  
  const [formData, setFormData] = useState<Vulnerability | ProjectVulnerability>(defaultValues);
  
  const [scoreData, setScoreData] =useState(parseStringToObject(formData.cvssvector ?? ""))
  const [calculatedScore, setCalculatedScore] = useState<CVSSReturn>(calculate(formData.cvssvector))
  const loadVulnerability = async() => {
      if (id) {
        setLoading(true);
        try {
          let vData:any
          if(props.action === 'saveToProject') {
            vData = await api.getProjectVulnerability(id) as  ProjectVulnerability;
          } else {
            vData = await api.getVulnerability(id) as  Vulnerability;
          }
          setFormData((prevData) => ({
            ...prevData,
            ...vData
          }));
          vData.cvssvector && setScoreData(parseStringToObject(vData.cvssvector))
        } catch (error) {
          //the api returns 404 if there are no instancess, which is not technically an error, 
          // it just means we haven't saved any instances
          if (typeof error === 'string' && !error.includes('404')) {
            console.error("Error fetching vulnerability data:", error);
            setLoadingError(true);    
          }
        } finally {
          setLoading(false);
        }
      }    
  }
  useEffect(() => {
    loadVulnerability();
  }, [id]);
  const [existingVulnerabilities, setExistingVulnerabilities] = useState<ProjectVulnerability[]>([])
  useEffect(() => {
    const loadData = async () => {
      if (projectId) {
        setLoading(true);
        try {
          const projectData = await api.getProject(projectId) as Project;
          setProject(projectData as Project);
        } catch (error) {
          setLoadingError(true);
          // Handle error fetching data
        } finally {
          setLoading(false);
        }
      }
      // need to load existing vulnerabilities for this project
      if(projectId){
        const projectVulnerabilities = await api.fetchProjectFindings(projectId) as ProjectVulnerability[]
        setExistingVulnerabilities(projectVulnerabilities)
      }
    }
    loadData();
  }, [projectId]);
  // URL
  // Parameter
  // status
  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
    setEditing(true)
    const { name, value } = event.target;
    setFormData((prevFormData) => ({
      ...prevFormData,
      [name]: value,
    }));
  };
  //for display of severity
  const [scoreTextColor, setScoreTextColor]=useState('blue-500')
  const [scoreMeaning, setScoreMeaning]=useState('None')
  
  //START CASCADING UPDATES FOR SCORE CHANGE
  //because of the cascading nature of a score change, we have two useEffect calls after a score change to make sure they happen in the right order
  const handleScoreChange = (name: string, value:string): void => {
    setEditing(true)
    setScoreData((prevScoreData) => ({
      ...prevScoreData,
      [name]: value,
    }));
  };
  
  useEffect(() => {
    const newScoreString = Object.entries(scoreData)
    .map(([k, v]) => v !== null ? `${k}:${v}` : k) // Return key if value is null
    .join('/');
    setFormData((prevFormData) => ({
      ...prevFormData,
      ["cvssvector"]: newScoreString,
    }));
  }, [scoreData]);
  useEffect(() => {
    let fullScore = calculate(formData.cvssvector)
    setCalculatedScore(fullScore)
    let score = Number(fullScore?.baseMetricScore)
    const [_meaning, _textColor] = useVulnerabilityColor(score)
    setScoreTextColor(_textColor)
    setScoreMeaning(_meaning)
    //for data to save
    setFormData((prevFormData) => ({
      ...prevFormData,
      ["vulnerabilityseverity"]: _meaning,
      ["cvssscore"]: String(fullScore.baseMetricScore),
    }));

  }, [formData.cvssvector]);
  //END cascading score change updates
  //used for modal, not currently in use
  const handleSubmit = async(event: FormEvent<HTMLFormElement>) => {
    setErrors({});
    setSaveError('')
    setBtnDisabled(true);
    event.preventDefault();
    const newErrors: FormErrors = {};
    
    if (formData.vulnerabilityname && formData.vulnerabilityname.length < 3) {
      newErrors.vulnerabilityname = 'Name should be at least three characters';
    } 
    if(projectId){
      //verify name doesn't already exist in project
      const existingVulnerability = existingVulnerabilities.find((vulnerability) => vulnerability.vulnerabilityname === formData.vulnerabilityname && vulnerability.id !== formData.id)
      if(existingVulnerability){
        newErrors.vulnerabilityname = 'Vulnerability name already exists in project';
      }
    }
    if (!formData.vulnerabilitysolution || formData.vulnerabilitysolution === '') {
      newErrors.vulnerabilitysolution = 'Please enter a solution';
    }
    if (!formData.vulnerabilitydescription || formData.vulnerabilitydescription === '') {
      newErrors.vulnerabilitydescription = 'Please enter a description';
    }
    if(!calculatedScore?.baseMetricScore){
      newErrors.vulnerabilityscore = 'Invalid score. Make sure you enter all parameters';
    }
    
    if (Object.keys(newErrors).length >  0) {
      setErrors(newErrors);
      if(topOfForm.current && topOfForm.current.scrollIntoView){
        topOfForm.current.scrollIntoView({behavior: "smooth"});
      }
      console.error('Form failed validation:', newErrors);
    } else {
      //if not project id, it's for the vulnerability database
      if(!projectId) {
        try {
          await api.upsertVulnerability(formData as Vulnerability);
          toast.success('Vulnerability saved.')
          navigate('/vulnerabilities')
          // Handle success (e.g., show success message, redirect, etc.)
        } catch (error) {
          console.error('Error submitting form:', error);
          setSaveError(String(error))
          // Handle error (e.g., show error message)
        } finally {
          setBtnDisabled(false);
        }
      } else {
        return saveProjectVulnerability()
      }
    }
    setBtnDisabled(false);
    
  }
  //this is used to add a vulnerability to a project instead of the vulnerability database
  const saveProjectVulnerability = async() => {
    if(!projectId){
      throw "projectID must be set to saveProjectVulnerability"
    }
    const projectVulnerability: Partial<ProjectVulnerability> = {
      ...formData,
      project: Number(projectId),
    }
    //decide whether to insert or update, props.action MUST be set
    if(props.action!='addToProject' && props.action!='saveToProject'){
      throw "Cannot choose whether to insert or updated based on action: " + props.action
    }
    try {
      if(props.action==='addToProject'){
        await api.insertProjectVulnerability(projectVulnerability)
      } else if(props.action==='saveToProject'){
        await api.updateProjectVulnerability(projectVulnerability)
      } else {
        throw "Cannot choose whether to insert or updated based on action: " + props.action
      }
      toast.success('Project vulnerability saved')
      navigate(`/projects/${projectId}/vulnerabilities`)
    } catch(error: any) {
      toast.error("Save error: " + error)
      console.error(error)
    } 
    setBtnDisabled(false);
  }
  
  const handleCancel = (event: FormEvent<HTMLButtonElement>):void => {
    event?.preventDefault()
    if(editing){
      if(!confirm('Quit without saving?')){
        return;
      }
    }
    if(projectId){
      navigate(`/projects/${projectId}/vulnerabilities`)
    } else {
      navigate(-1)
    }
  }
  const handleCKchange = (name:string, value:string):void => {
    setFormData((prevFormData) => ({
      ...prevFormData,
      [name]: value,
    }));
  }
  
  //label for button differs base on whether this is being added to a project, editing for a project, or the vuln db
  const saveLabel =  () =>{
    if(props.action==='saveToProject'){
      return "Save"
    }
    if(props.action==='addToProject'){
      return "Add to Project"
    }
    if(id){
      return "Save Vulnerability"
    }
    return "Add to Database"
  }
  // special handling for vulnerability name because it can trigger a search
  const handleNameChange = (value:string) => {
    setFormData((prevFormData) => ({
      ...prevFormData,
      ["vulnerabilityname"]: value,
    }));
    setIsInitialLoad(false)
 }
 // when a vulneratbility is selected on name dropdown, this callback takes the resulting vulnerability and updates the form
  const handleSelectedSearchItem = async(template: Vulnerability) => {
    let temp: Partial<ProjectVulnerability> = {}
    // if there is a POC, save it an append to the vulnerability
    if ('POC' in formData) {
      temp = {
        POC: formData.POC,
        instance: formData.instance
      };
    }
    // we need to set the id of the template to the id of the form data so that the form data is updated with the id
    template.id = formData.id
    setFormData({
      ...template,
      ...temp
    });
    setIsInitialLoad(false)
  }
  const heading = () =>{
    if(props.action==='saveToProject'){
      return "Edit Project Vulnerablity"
    }
    if(props.action==='addToProject'){
      return "Add Vulnerablity to Project"
    }
    if(id){
      return "Save Vulnerability"
    }
    return "Edit Vulnerability"
  }
  if (loadingError) return <ModalErrorMessage message={"Error loading vulnerability"} />
  return (
    <div ref={topOfForm} className="flex-1 rounded-lg border-black relative">
      <h1 className="mb-3 text-2xl">
          {heading()}
      </h1>
      {(projectId && !project) && 
        <RowSkeleton />
      }
      {project && 
        <p className="mb-4">Project: {project.name}</p>
      }
      {saveError && <FormErrorMessage message={saveError} />}
      <form onSubmit={handleSubmit} id="vulnerabilityForm" method="POST">
       <Tabs value={selectedTab}>
        <TabsHeader
          placeholder="Tabs Header"
          onPointerEnterCapture={() => {}}
          onPointerLeaveCapture={() => {}}
        >            <Tab 
              key="summary" 
              value="summary" 
              onClick={() => setSelectedTab('summary')}
              placeholder="Summary Tab"
              onPointerEnterCapture={() => {}}
              onPointerLeaveCapture={() => {}}
            >
            {(errors.vulnerabilityname || errors.vulnerabilitydescription || errors.vulnerabilitysolution) && <ExclamationCircleIcon className='inline mb-1 h-6 w-6 mr-1 text-red-500' />}
              Summary
            </Tab>            <Tab 
              key="score" 
              value="score" 
              onClick={() => setSelectedTab('score')}
              placeholder="Score Calculator Tab"
              onPointerEnterCapture={() => {}}
              onPointerLeaveCapture={() => {}}
            >
              {errors.vulnerabilityscore && <ExclamationCircleIcon className='inline mb-1 h-6 w-6 mr-1 text-red-500' />}
              Score Calculator
            </Tab>            {(projectId && "POC" in formData) &&
            <Tab 
              key="POC" 
              value="POC" 
              onClick={() => setSelectedTab('POC')} 
              className={errors.instance ? 'text-red-500' : ''}
              placeholder="Proof of Concept Tab"
              onPointerEnterCapture={() => {}}
              onPointerLeaveCapture={() => {}}
            >
              {errors.instance && <ExclamationCircleIcon className='inline mb-1 h-6 w-6 mr-1' />}
              Proof of Concept
            </Tab>
            }
        </TabsHeader>
        {loading ? <FormSkeleton numInputs={8} className='max-w-2xl'/> : (        <TabsBody
          placeholder="Tabs Body Container"
          onPointerEnterCapture={() => {}}
          onPointerLeaveCapture={() => {}}
        >          <TabPanelComponent 
            key="summary" 
            value="summary" 
            className="tab-panel-with-editor"
            placeholder="Summary Panel"
            onPointerEnterCapture={() => {}}
            onPointerLeaveCapture={() => {}}
          >
            <div className="w-full mb-4">
              <div className="relative ">
                <label 
                  htmlFor="vulnerabilityname"
                  className={StyleLabel}>
                  Name
                </label>
                
                  {projectId ? 
                    <VulnerabilityNameInput onSelect={handleSelectedSearchItem} value={formData.vulnerabilityname} onChange={handleNameChange} isInitialLoad={isInitialLoad}/>
                  :
                    <input type="text" id="vulnerabilityname" name="vulnerabilityname" value={formData.vulnerabilityname} onChange={handleChange} className={StyleTextfield}/>
                  }
                
                {errors.vulnerabilityname && <FormErrorMessage message={errors.vulnerabilityname} />}
              </div>
              <div className="relative">
                <label 
                  htmlFor="vulnerabilityseverity"
                  className='mb-1 mt-5 block text-sm font-medium text-gray-900 dark:text-white'>
                  Severity
                </label>
                {scoreMeaning ? <span className={`text-[${scoreTextColor}]`}>{scoreMeaning}</span> : "Use calculator below"}
              </div>
              <div className="relative">
                <label 
                  htmlFor="vulnerabilitydescription"
                  className='mb-1 mt-5 block text-sm font-medium text-gray-900 dark:text-white'>
                  Description
                </label>
                {errors.vulnerabilitydescription && <FormErrorMessage message={errors.vulnerabilitydescription} />}
                <CKWrapper
                    id="vulnerabilitydescription"
                    data = {formData.vulnerabilitydescription || ''}
                    onChange={handleCKchange}
                  />
                
              </div>
              <div className="relative">
                <label 
                  htmlFor="vulnerabilitysolution"
                  className='mb-1 mt-5 block text-sm font-medium text-gray-900 dark:text-white'>
                  Solution
                </label>
                {errors.vulnerabilitysolution && <FormErrorMessage message={errors.vulnerabilitysolution} />}
                <CKWrapper
                    id="vulnerabilitysolution"
                    data = {formData.vulnerabilitysolution || ''}
                    onChange={handleCKchange}
                  />
                
              </div>              <div className="relative mb-16">
                <label 
                  htmlFor="vulnerabilitylink"
                  className='mb-1 mt-5 block text-sm font-medium text-gray-900 dark:text-white'>
                  Links to more information
                </label>
                <div className="editor-with-dropdown">
                  <CKWrapper
                    id="vulnerabilityreferlnk"
                    data = {formData.vulnerabilityreferlnk || ''}
                    onChange={handleCKchange}
                  />
                </div>
              </div>
              
            </div>
          </TabPanelComponent>          <TabPanelComponent key="score" value="score" className="tab-panel-with-editor">
            {errors.vulnerabilityscore && <FormErrorMessage message={errors.vulnerabilityscore} />}
              <div className='mb-4 dark:text-white'>
                
                Score: <span className={`text-[${scoreTextColor}]`}>
                  {calculatedScore.baseMetricScore} ({scoreMeaning})
                </span>
              </div>
              <div className="flex min-w-1/2">
                <div className="column w-full">
                  <fieldset className="mr-0 form-control rounded-md p-0 mt-0" >                    <legend className='text-sm mb-0 dark:text-white'>Attack Vector</legend>
                    <List 
                      placeholder="Attack Vector Options"
                      onPointerEnterCapture={() => {}}
                      onPointerLeaveCapture={() => {}}
                    >
                    <ScoreRadioButton name='AV' label="Network" value="N" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='AV' label="Adjacent" value="A" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='AV' label="Local" value="L" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='AV' label="Physical" value="P" scoreData={scoreData} onChange={handleScoreChange}/>
                    </List>
                  </fieldset>
                  <fieldset className="mr-0 form-control rounded-md p-0 mt-0" >                    <legend className='pt-2 text-sm mb-0 dark:text-white'>Attack Complexity</legend>
                    <List
                      placeholder="Attack Complexity Options"
                      onPointerEnterCapture={() => {}}
                      onPointerLeaveCapture={() => {}}
                    >
                    <ScoreRadioButton name='AC' label="Low" value="L" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='AC' label="High" value="H" scoreData={scoreData} onChange={handleScoreChange}/>
                    </List>
                  </fieldset>
                  <fieldset className="mr-0 form-control rounded-md p-0 mt-0" >                    <legend className='pt-2 text-sm mb-0 dark:text-white'>Privileges Required</legend>
                    <List
                      placeholder="Privileges Required Options"
                      onPointerEnterCapture={() => {}}
                      onPointerLeaveCapture={() => {}}
                    >
                    <ScoreRadioButton name='PR' label="None" value="N" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='PR' label="Low" value="L" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='PR' label="High" value="H" scoreData={scoreData} onChange={handleScoreChange}/>
                    </List>
                  </fieldset>
                  <fieldset className="mr-0 form-control rounded-md p-0 mt-0" >                    <legend className='pt-2 text-sm mb-0 dark:text-white'>User Interaction</legend>
                    <List
                      placeholder="User Interaction Options"
                      onPointerEnterCapture={() => {}}
                      onPointerLeaveCapture={() => {}}
                    >
                    <ScoreRadioButton name='UI' label="None" value="N" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='UI' label="Required" value="R" scoreData={scoreData} onChange={handleScoreChange}/>
                    </List>
                  </fieldset>
                </div>
                <div className="column w-full">
                  <fieldset className="form-control mb-4 rounded-md p-0 mt-0" >                    <legend className='pt-2 text-sm mb-0 dark:text-white'>Scope</legend>
                    <List
                      placeholder="Scope Options"
                      onPointerEnterCapture={() => {}}
                      onPointerLeaveCapture={() => {}}
                    >
                    <ScoreRadioButton name='S' label="Unchanged" value="U" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='S' label="Changed" value="C" scoreData={scoreData} onChange={handleScoreChange}/>
                    </List>
                  </fieldset>
                  <fieldset className="form-control mb-4 rounded-md p-0 mt-0" >                    <legend className='pt-2 text-sm mb-0 dark:text-white'>Confidentiality</legend>
                    <List
                      placeholder="Confidentiality Options"
                      onPointerEnterCapture={() => {}}
                      onPointerLeaveCapture={() => {}}
                    >
                    <ScoreRadioButton name='C' label="None" value="N" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='C' label="Low" value="L" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='C' label="High" value="H" scoreData={scoreData} onChange={handleScoreChange}/>
                    </List>
                  </fieldset>
                  <fieldset className="form-control mb-4 rounded-md p-0 mt-0" >                    <legend className='pt-2 text-sm mb-0 dark:text-white'>Integrity</legend>
                    <List
                      placeholder="Integrity Options"
                      onPointerEnterCapture={() => {}}
                      onPointerLeaveCapture={() => {}}
                    >
                    <ScoreRadioButton name='I' label="None" value="N" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='I' label="Low" value="L" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='I' label="High" value="H" scoreData={scoreData} onChange={handleScoreChange}/>
                    </List>
                  </fieldset>
                  <fieldset className="form-control mb-4 rounded-md p-0 mt-0" >                    <legend className='pt-2 text-sm mb-0 dark:text-white'>Availability</legend>
                    <List
                      placeholder="Availability Options"
                      onPointerEnterCapture={() => {}}
                      onPointerLeaveCapture={() => {}}
                    >
                    <ScoreRadioButton name='A' label="None" value="N" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='A' label="Low" value="L" scoreData={scoreData} onChange={handleScoreChange}/>
                    <ScoreRadioButton name='A' label="High" value="H" scoreData={scoreData} onChange={handleScoreChange}/>
                    </List>
                  </fieldset>
                </div>              </div>
          </TabPanelComponent>
          {(projectId && "POC" in formData) &&            <TabPanelComponent key="POC" value="POC" className='min-h-96 min-w-fit overflow-visible tab-panel-with-editor'>
              <>                <div className="relative overflow-visible">
                  <label 
                    htmlFor="POC"
                    className='mb-1 mt-5 block text-sm font-medium text-gray-900 dark:text-white'>
                    Proof of Concept
                  </label>
                  <div className="editor-with-dropdown">
                    <CKWrapper
                      id="POC"
                      data = {formData.POC || ''}
                      onChange={handleCKchange}
                    />
                  </div>
                </div>
                <div className="pt-8">
                  {formData.id && <InstanceTable id={formData.id as number}/>}  
                </div>              </>
            </TabPanelComponent>
          }
        </TabsBody>
        )}
      </Tabs>      <div className="fixed bottom-2 left-80 z-50">
        <button 
          type="submit" 
          className="bg-primary cursor-pointer disabled:bg-gray-300 text-white py-2 px-4 rounded"
          disabled={btnDisabled}>
          {saveLabel()} 
        </button>
        <button 
          type="button" 
          className="bg-red-600 cursor-pointer disabled:bg-gray-300 ml-2 text-white py-2 px-4 rounded"
          onClick={handleCancel}>
            Cancel
        </button>
      </div>
      </form>
    </div>
  );
}

export default WithAuth(VulnerabilityForm);